<template>
  <div>
    <button @click="getCameras">开始 </button>
    <button @click="stop"> 停 </button>
<!--    <view id="reader">-->

<!--    </view>-->

    <div id="reader">

    </div>
	
	<div id="bcid">
		
	</div>
  </div>
</template>

<script>
import {
  Html5QrcodeScanner,
  Html5Qrcode
} from "html5-qrcode";
export default {
  name: "Scan03",
  data() {
    return {
      cameraId: '',
      devices: [],
      html5QrCode: null
    }
  },
  mounted() {
    // function onScanSuccess(decodedText, decodedResult) {
    // 	// handle the scanned code as you like, for example:
    // 	console.log(`Code matched = ${decodedText}`, decodedResult);
    // }

    // function onScanFailure(error) {
    // 	// handle scan failure, usually better to ignore and keep scanning.
    // 	// for example:
    // 	console.warn(`Code scan error = ${error}`);
    // }

    // let html5QrcodeScanner = new Html5QrcodeScanner(
    // 	"reader", {
    // 		fps: 10,
    // 		qrbox: {
    // 			width: 250,
    // 			height: 250
    // 		}
    // 	},
    // 	/* verbose= */
    // 	false);
    // html5QrcodeScanner.render(onScanSuccess, onScanFailure);
  },
  methods: {
    getCameras() {
      Html5Qrcode.getCameras()
          .then((devices) => {
            /* 当前设备的摄像头信息 */
            console.log(devices);
            /**
             * devices would be an array of objects of type:
             * { id: "id", label: "label" }
             */
            if (devices && devices.length) {
              // 如果有2个摄像头，1为前置的
              if (devices.length > 1) {
                this.cameraId = devices[1].id;
              } else {
                this.cameraId = devices[0].id;
              }
              this.devices = devices;
              this.start();
            }
          })
          .catch((err) => {
            // handle err
            console.log('getCameras err:', err); // 获取设备信息失败
          });
    },
    start() {
      this.html5QrCode = new Html5Qrcode("reader");
      this.html5QrCode
          .start(
              this.cameraId, {
                fps: 10, // 频率
                qrbox: {
                  width: 250,
                  height: 250
                },
              },
              (decodedText, decodedResult) => {
                console.log('decodedText', decodedText);
                console.log('decodedResult', decodedResult);
                /* 有解码文本则stop */
                if (decodedText) {

                  this.stop();
                  alert(decodedText);
                }
              },
              (errorMessage) => {
                console.log(errorMessage);
              }
          )
          .catch((err) => {
            console.log(`Unable to start scanning, error: ${err}`);
          });
    },
    stop() {
      this.html5QrCode
          .stop()
          .then((ignore) => {
            console.log("QR Code scanning stopped.");
          })
          .catch((err) => {
            console.log("Unable to stop scanning.");
          });
    },
  },
}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}

#reader {
  width: 20rem;
  height: 14rem;
  margin: 20px auto;
  background-color: #EEE;
}

#bcid{
	width: 100%;
	height: 100%;
	position: absolute;
	background: #000000;
	/* position: fixed;
	top:0px; */
}
</style>